<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<view class="input-group">
				<input type="text" v-model="name" placeholder="请输入您要测的手机/13 Pro Max" placeholder-class="tip" />
				<view @click="getGoods('')">搜索</view>
			</view>
			<!-- 		<view v-for="item in flist" :key="item.id" class="s-list" :id="'main-'+item.id">
				<text class="s-item">{{item.name}}</text> -->

			<view v-if="!slist.length" class="p-32 c-grey center f28">暂无数据！</view>
			<view class="t-list">
				<view @click="navToList(sitem.id)" class="t-item" v-for="sitem in slist" :key="sitem.id">
					<view class="title">
						<!-- sitem.image || -->
						<image src="/static/icon/phone.png" mode="aspectFill"></image>
						{{ sitem.name }}
					</view>
					<view>
						<view>预计最高可卖</view>
						<view class="money">
							<text>¥</text>
							{{ sitem.maxmoney }}
						</view>
					</view>
				</view>
				<!-- </view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sizeCalcState: false,
			tabScrollTop: 0,
			currentId: 0,
			flist: [],
			slist: [],
			type: 1,
			name: ''
		};
	},
	computed: {},
	onShareAppMessage(e) {},
	onLoad(option) {
		if (option.type) {
			this.type = option.type;
		}
		this.loadData();
	},
	methods: {
		async loadData(id, index) {
			var that = this;
			//let list = await this.$api.json('cateList');
			let list = await this.$api.request('/backorder/getbackallcate', 'POST');
			if (list) {
				uni.stopPullDownRefresh();
				this.flist = list;
				this.currentId = id || list[0].id;
				this.getGoods();
			}
		},

		// 获取分类商品
		async getGoods(id) {
			let list = await this.$api.request('/Backorder/getbackgoods', 'POST', {
				backcate_id: id || this.currentId,
				name: this.name
			});
			this.slist = list;
		},

		//一级分类点击
		tabtap(item) {
			// if (!this.sizeCalcState) {
			// 	this.calcSize();
			// }
			this.currentId = item.id;
			// let index = this.flist.findIndex(fitem => fitem.id === item.id);
			// this.tabScrollTop = this.flist[index].top;
			this.getGoods();
		},
		//右侧栏滚动
		asideScroll(e) {
			if (!this.sizeCalcState) {
				this.calcSize();
			}
			let scrollTop = e.detail.scrollTop;
			let tabs = this.flist.filter((item) => item.top <= scrollTop).reverse();
			if (tabs.length > 0) {
				this.currentId = tabs[0].id;
			}
		},
		//计算右侧栏每个tab的高度等信息
		calcSize() {
			let h = 0;
			this.flist.forEach((item) => {
				let view = uni.createSelectorQuery().select('#main-' + item.id);
				view.fields(
					{
						size: true
					},
					(data) => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}
				).exec();
			});
			this.sizeCalcState = true;
		},
		navToList(fid, sid) {
			let url = '/pages/recycle/test';
			if (this.type == 2) {
				url = '/pages/recycle/maintenance';
			}
			uni.navigateTo({
				url: `${url}?id=${fid}`
			});
		}
	},
	onPullDownRefresh() {
		this.flist = [];
		this.slist = [];
		this.sizeCalcState = false;
		this.loadData();
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	background-color: #f8f8f8;
}

.content {
	display: flex;
}

.left-aside {
	flex-shrink: 0;
	width: 200upx;
	height: 100%;
	background-color: #fff;
}

.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100upx;
	font-size: 28upx;
	color: $font-color-base;
	position: relative;

	&.b-b::after {
		border: none;
	}

	&.active {
		color: $main-color;
		background: #f8f8f8;

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 40upx;
			width: 10upx;
			background-color: $main-color;
			border-radius: 0 0;
			opacity: 0.8;
		}
	}
}

.right-aside {
	flex: 1;
	overflow: hidden;
	padding: 0 20upx;
	background-color: #fff;
	border-left: 1rpx solid #f5f5f5;
}

.input-group {
	border: 1rpx solid $main-color;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;

	input {
		flex: 1;
		padding: 10rpx 20rpx;
		height: 60rpx;
	}

	.tip {
		font-size: 28rpx;
		color: #999;
	}

	> view {
		background-color: $main-color;
		color: #fff;
		width: 100rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.s-item {
	display: flex;
	align-items: center;
	height: 70upx;
	padding: 20rpx 0 10rpx;
	font-size: 32upx;
	font-weight: 600;
	color: $font-color-dark;
	border-bottom: 1rpx solid #f5f5f5;
}

.t-list {
	/* display: flex; */
	flex-wrap: wrap;
	width: 100%;
	background: #fff;

	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}

.t-item {
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 20upx;
	color: #999;
	padding: 20upx 0;
	border-bottom: 1rpx solid #f5f5f5;

	.title {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		column-gap: 20rpx;
		color: #333;
	}

	.money {
		font-size: 40rpx;
		text-align: center;
		color: $main-color;

		text {
			font-size: 30rpx;
		}
	}

	image {
		width: 90upx;
		height: 120upx;
		border-radius: 18rpx;
	}
}
</style>
